import React, { useState, useRef, useEffect } from 'react';
import { Input, Button, Form, Pagination, Empty, Avatar } from "antd";
import styles from "./index.less";
import { connect } from 'umi';
import { Icon } from '@ant-design/compatible';
import imgUrl from "@/assets/gs.png";
import SectionTitle from '@/components/SectionTitle';
import moment from "moment";
import { doFetch } from '@/utils/doFetch'

const resultArr = [
    {
        url: imgUrl,
        price: "￥88.0 ~ ￥188.0",
        description: "适配霸王锁体，多种开锁方式,适配霸王锁体，多种开锁方式,适配霸王锁体，多种开锁方式",
        icon: "ordered-list",
        time: moment().format("YYYY/MM/DD"),
        id: 1,
        product: [
            {
                name: "产品1",
                id: 1
            },
            {
                name: "产品1",
                id: 2
            },
            {
                name: "产品1",
                id: 3
            }
        ]

    },
    {
        url: imgUrl,
        price: "￥88.0 ~ ￥188.0",
        description: "适配霸王锁体，多种开锁方式,适配霸王锁体，多种开锁方式,适配霸王锁体，多种开锁方式",
        icon: "ordered-list",
        time: moment().format("YYYY/MM/DD"),
        id: 2,
        product: [
            {
                name: "产品1",
                id: 1
            },
            {
                name: "产品1",
                id: 2
            },
            {
                name: "产品1",
                id: 3
            }
        ]
    },
    {
        url: imgUrl,
        price: "￥88.0 ~ ￥188.0",
        description: "适配霸王锁体，多种开锁方式,适配霸王锁体，多种开锁方式,适配霸王锁体，多种开锁方式",
        icon: "ordered-list",
        time: moment().format("YYYY/MM/DD"),
        id: 3,
        product: [
            {
                name: "产品1",
                id: 1
            },
            {
                name: "产品1",
                id: 2
            },
            {
                name: "产品1",
                id: 3
            }
        ]
    },
    {
        url: imgUrl,
        price: "￥88.0 ~ ￥188.0",
        description: "适配霸王锁体，多种开锁方式,适配霸王锁体，多种开锁方式,适配霸王锁体，多种开锁方式",
        icon: "ordered-list",
        time: moment().format("YYYY/MM/DD"),
        id: 4,
        product: [
            {
                name: "产品1",
                id: 1
            },
            {
                name: "产品1",
                id: 2
            },
            {
                name: "产品1",
                id: 3
            }
        ]
    },
    {
        url: imgUrl,
        price: "￥88.0 ~ ￥188.0",
        description: "适配霸王锁体，多种开锁方式,适配霸王锁体，多种开锁方式,适配霸王锁体，多种开锁方式",
        icon: "ordered-list",
        time: moment().format("YYYY/MM/DD"),
        id: 5,
        product: [
            {
                name: "产品1",
                id: 1
            },
            {
                name: "产品1产品1产品1产品1产品1产品1产品1产品1产品1产品1产品1",
                id: 2
            },
            {
                name: "产品1产品1产品1产品1产品1产品1产品1产品1产品1产品1产品1",
                id: 3
            }
        ]
    }
]
const Homepage = ({ global: { companyinfo } }) => {

    const [prod, cprod] = useState([]),
        [dase, cdase] = useState([]);

    useEffect(() => {

        doFetch({ url: "/ngic-promote-product/umProduct/queryPage", params: { status: 1, pageIndex: 1, pageSize: 5 } }).then(res => {
            cprod(res?.data?.page?.list || [])
        })
        doFetch({ url: "/ngic-promote-product/umProductCase/queryDetailPage", params: {} }).then(res => {
            cdase(res?.data?.page?.list || [])
        })
    }, [])





    return (
        <div className={styles.homepage}>
            <div className={styles.banner} style={{ marginTop: -36 }}></div>
            <div className={styles.contain}>
                <div className="content">
                    <div className={styles.cardItem} style={{ marginTop: 12 }}>
                        <SectionTitle extra={<div className={`${styles.cardMore} rowcenter`}>
                            公司详情 <Icon type="right" /></div>} size="large">
                            公司简介
                        </SectionTitle>
                        <div className={styles.intro}>
                            <p className={styles.introLf}>
                                {companyinfo?.info?.companyProfile}
                            </p>
                            <div className={styles.introLr}>
                                <img src={imgUrl} alt="" />
                            </div>
                        </div>
                    </div>
                    <div className={styles.cardItem}>
                        <SectionTitle extra={<div className={`${styles.cardMore} rowcenter`}>
                            查看更多 <Icon type="right" /></div>} size="large">
                            推荐产品
                        </SectionTitle>
                        <div className={styles.intro}>
                            <div className="ulBox">
                                <div style={{ width: 1200, margin: "0 auto" }}>
                                    <ul style={{ overflow: "hidden", width: 1215 }}>
                                        {
                                            prod.map(it => {
                                                return <li key={it.id} className="liItem">
                                                    <div className="liDiv" style={{ border: "1px solid #f5f5f5" }}>
                                                        <div className="liImg" style={{ backgroundImage: `url(${it.productImageUrlList && it.productImageUrlList.length ? it.productImageUrlList[0].url : require("@/assets/default.png")})` }}>

                                                        </div>
                                                        <div className="liText">
                                                            <div style={{ color: `${it.isDiscuss == 1 ? "#bbb" : "#ff4800"}`, fontWeight: 500, marginBottom: 5 }}>{it.isDiscuss == 1 ? "面议" : `￥${it.minPrice} ~ ￥ ${it.maxPrice}`}</div>
                                                            <div className="description" title={it.productName}>{it.productName}</div>
                                                            <div className="bottomText" style={{ display: "flex", justifyContent: "space-between" }}>
                                                                <div style={{ display: "flex", alignItems: "center" }}>
                                                                    <Icon type="ordered-list" style={{ fontSize: 12, marginRight: 5, color: "#ff4800" }} />
                                                                    <div className="oneLine" title={it.companyName}>{it.companyName}</div>
                                                                </div>
                                                                <div className="oneline" title={`${it.provinceName} ${it.cityName}`}>{`${it.provinceName} ${it.cityName}`}</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            })
                                        }
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <SectionTitle extra={<div className={`${styles.cardMore} rowcenter`}> 查看更多 <Icon type="right" /></div>} size="large">
                        成功案例
                    </SectionTitle>
                </div>
                <div>
                    <div className={styles.cardItem} style={{ background: "#f5f5f5" }}>
                        <div className={styles.intro}>
                            <ul className={`${styles.caseList} content`}>
                                {
                                    dase && dase.map(it => {
                                        return <li key={it.id} className={styles.caseLi}>
                                            <div className={styles.leftLi}>
                                                <img className={styles.liImgRow} src={it.caseImgList && it.caseImgList.length ? it.caseImgList[0].url : require("@/assets/default.png")} />
                                                <div className={`${styles.liIntroRow}`}>
                                                    <p className="oneline">案例名称：{it.productCaseName}</p>
                                                    <span className="oneline" style={{ color: "#aaa" }}>案例简介：{it.productCaseBrief}</span>
                                                </div>
                                            </div>
                                            <div className={styles.centerLi}>
                                                {
                                                    it.umRelList && it.umRelList.map((item, i) => {
                                                        return <div style={{ flex: 1, color: "#ff4800", display: "flex", justifyContent: "space-around", overflow: "hidden" }} key={i}>
                                                            <div title={item.productName} className="oneline" style={{ padding: "0 4px" }}>{item.productName}</div>
                                                            <span style={{ display: `${it.product.length == i + 1 ? "none" : "inline-block"}` }}>/</span>
                                                        </div>
                                                    })
                                                }
                                            </div>
                                            <div className={styles.rightLi}>
                                                <Icon type="clock-circle" theme="filled" style={{ marginRight: 10 }} />
                                                <span>{it.releaseTime}</span>
                                            </div>
                                        </li>
                                    })
                                }


                            </ul>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    )
}

export default connect(({ global, login }) => ({
    global,
    login,
}))(Homepage);